<template>
  <div>
    <v-text-field color="primary" label="搜索单词" @keydown.enter="searchListener" v-model="wordBo.word"></v-text-field>
  </div>
  <div v-if="wordList != null" style="margin-bottom: 20px;">
    <div class="word-list">
      <v-list-item :active="index==curIndex" color="primary" @click="viewWordDetail(word, index)" :key="word.wordId" 
        v-for="(word, index) in wordList">
        <!-- <template v-slot:prepend>
        <v-img v-if="word.image != null" :width="40" aspect-ratio="1/1" cover :src="word.image"></v-img>
      </template> -->
        <span><strong> {{ word.word }} </strong></span> &nbsp;
        <span v-for="(pronunciation, index) in word.pronunciation" :key="index">
          <small> {{ pronunciation.region }} [{{ pronunciation.symbol }}] </small>
        </span>
        <br>
        <span v-if="explainMode=='auto'" class="limitation-content">
          <span v-if="word.translatedMeanings!=null&&word.translatedMeanings.length>0">
            {{ ''+word.translatedMeanings[0].type+'.' }}
            {{ word.translatedMeanings[0].meaning }}
          </span>
          <span v-else-if="word.originalMeanings!=null&&word.originalMeanings.length>0">
            {{ word.originalMeanings[0].type?word.originalMeanings[0].type+'.':'' }}
            {{ word.originalMeanings[0].meaning[0].explain }}
          </span>
        </span>
          <template v-slot:append>
            <v-menu>
            <template v-slot:activator="{ props }">
              <v-btn :elevation="0" icon="mdi-menu-down" v-bind="props"></v-btn>
            </template>
            <v-list>
              <v-list-item>
                <v-list-item-title>复制</v-list-item-title>
              </v-list-item>
              <v-list-item v-if="$store.state.userInfo.userId==word.wordId">
                <v-list-item-title>编辑</v-list-item-title>
              </v-list-item>
              <v-list-item>
                <v-list-item-title @click="deleteFromList(word)">从本列表移除</v-list-item-title>
              </v-list-item>
              <v-list-item v-if="$store.state.userInfo.userId==word.wordId">
                <v-list-item-title>删除</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
          </template>
        <v-divider></v-divider>
      </v-list-item>
    </div>
  </div>
  <div :class="['side-word-detail', sideWordDetailMode == 'open' ? 'side-word-detail-open' : '',
      sideWordDetailMode == 'close' ? 'side-word-detail-close' : '','elevation-4']">
    <v-btn class="ma-2" color="info" @click="sideWordDetailMode = 'close';this.$refs.wordView.applyDestroyed()">
      <v-icon start icon="mdi-arrow-left" />
      返回列表
    </v-btn>
    <div style="margin-bottom: 60px;">
      <word-view :setPageListener="selectPage" :next-callback="nextListener" :show-candidate="true" ref="wordView" />
    </div>
  </div>
  <v-pagination active-color="primary" style="margin-bottom: 50px;margin-left:-10px;margin-right: -10px" 
  prev-icon="mdi-menu-left" next-icon="mdi-menu-right" :length="total" 
    @update:model-value="selectPage" :model-value="wordBo.pageNum"/>
  <v-overlay :model-value="overlay" class="align-center justify-center">
    <v-progress-circular color="primary" indeterminate size="64"></v-progress-circular>
  </v-overlay>
  <div>
    <v-btn color="primary" @click="textInputDialog = true" class="ma-2 btn_float" icon="mdi-plus"></v-btn>
  </div>
  <v-dialog v-model="textInputDialog" persistent width="auto">
    <v-card>
      <v-card-title class="text-h5">
        批量导入单词
      </v-card-title>
      <v-card-text>请在下方输入要导入的单词，支持“，”、“,”、“；”、“;”分割符</v-card-text>
      <v-combobox v-model="lang" label="选择语种" :items="langList" item-title="lang" item-value="langId"></v-combobox>
      <v-textarea v-model.trim="inputText" hint="example：abandon，ahead，about，...."/>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn variant="text" @click="textInputDialog = false">
          取消
        </v-btn>
        <v-btn color="primary" variant="text" @click="sendBathInput">
          确定
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  <v-snackbar v-model="snackbar">
    {{ snackbarMsg }}
  </v-snackbar>
</template>

<script>

import { getBookWord } from "@/api/word.js";
import { bathTextInput,deleteWordLine } from '@/api/wordLine.js'
import WordView from "./WordView.vue";
import { langList } from "@/api/lang.js";
export default {
  components: {WordView},
  data() {
    return {
      searchKey: '搜索',
      wordList: null,
      showingList: null,
      wordBo: {
        bookId: undefined,
        pageSize: 20,
        pageNum: 1,
        word:null
      },
      total: 0,
      overlay: false,
      textInputDialog: false,
      inputText: null,
      sideWordDetailMode: false,
      curIndex:0,
      langList: [],
      lang:undefined,
      snackbar:false,
      snackbarMsg:'',
      explainMode:'auto'
    }
  },
  created() {
    this.loadWordList()
    this.loadLang()
  },
  methods: {
    loadWordList() {
      this.wordBo.bookId = this.$route.params.bookId
      this.wordBo.bookDataFlag = this.$route.params.dataFlag
      this.overlay = true
      getBookWord(this.wordBo).then(resp => {
        this.wordList=[]
        this.wordList = resp.rows
        if (resp.total % this.wordBo.pageSize == 0)
          this.total = resp.total / this.wordBo.pageSize
        else this.total = parseInt(resp.total / this.wordBo.pageSize) + 1
        if(this.sideWordDetailMode == 'open'){
          this.viewWordDetail(this.wordList[this.curIndex], this.curIndex)
        }
      }).finally(() => this.overlay = false)
    },
    loadLang(){
      langList({}).then(resp => {
        this.langList = resp.data
      })
    },
    viewWordDetail(word, curIndex) {
      this.sideWordDetailMode = 'open'
      this.$refs.wordView.setCandidate(this.wordList[curIndex-1],this.wordList[curIndex+1],
        this.wordBo.pageNum,this.wordBo.pageNum<this.total)
      this.$refs.wordView.setWordDetail(word)
      this.curIndex=curIndex
    },

    selectPage(num) {
      this.curIndex=0
      this.wordBo.pageNum = num
      this.loadWordList()
    },
    sendBathInput() {
      if (this.inputText == null || this.inputText == ''||this.lang==undefined) return
      bathTextInput({
        userInput: this.inputText,
        bookId: this.wordBo.bookId,
        langId:this.lang.langId
      }).then(resp => {
        if (resp.code == 1) {
          this.loadWordList()
          this.inputText = undefined
          this.textInputDialog = false
        }
        if(resp.msg!=null){
          this.snackbar=true
          this.snackbarMsg=resp.msg
        }
      })
    },
    searchListener(){
      this.loadWordList()
    },
    deleteFromList(word){
      deleteWordLine({wordId:word.wordId,bookId: this.$route.params.bookId}).then(resp=>{
        this.snackbar=true
        this.snackbarMsg=resp.msg
        this.loadWordList()
      }).catch(err=>{
        this.snackbar=true
        this.snackbarMsg=err
      })
    },
    nextListener(direction){
      if(direction=='pre')
        this.viewWordDetail(this.wordList[this.curIndex-1],this.curIndex-1)
      if(direction=='next')
        this.viewWordDetail(this.wordList[this.curIndex+1],this.curIndex+1)
    }
  }
}
</script>

<style scoped>
.btn_float {
  position: fixed;
  right: 20px;
  bottom: 50px;
}

.side-word-detail {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 100%;
  top: 64px;
  background-color: white;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.limitation-content {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
}

@media screen and (min-width: 769px) {
  /* .word-list{
    width: 50%;
  } */
  .side-word-detail{
    width: 50%;
    position: fixed;
    overflow-y: auto;
    z-index: 100;
  }

  .side-word-detail-open {
    animation-name: detailAnimationOpenHalf;
  }

  .side-word-detail-close {
    animation-name: detailAnimationCloseHalf;
  }
}

@media screen and (max-width: 768px) {
  .side-word-detail-open {
    animation-name: detailAnimationOpen768;
  }

  .side-word-detail-close {
    animation-name: detailAnimationClose768;
  }
  .side-word-detail{
    height: calc(100vh - 64px);
    position: fixed;
    overflow: auto;
    z-index: 1;
  }
}

@keyframes detailAnimationOpen768 {
  from {
    left: 100%;
  }

  to {
    left: 0;
  }
}

@keyframes detailAnimationClose768 {
  from {
    left: 0%;
  }

  to {
    left: 100%;
  }
}

@keyframes detailAnimationOpenHalf {
  from {
    left: 100%;
  }

  to {
    left: 50%;
  }
}

@keyframes detailAnimationCloseHalf {
  from {
    left: 50%;
  }

  to {
    left: 100%;
  }
}
</style>